<template>
  <div class="home_page">
    <wHeader></wHeader>

    <div class="home_banner">
      <el-carousel ref="carousel" class="carousel">
        <el-carousel-item v-for="item in Banners" :key="item.id">
          <img :src="item.bannerUrl" v-onerror />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="home_search">
      <div class="filter_top">
        <div class="filter_item" style="padding-right: 5px" @click="handleOpenSelect">
          <el-input size="large" v-model="typeParams.name" readonly clearable :placeholder="$t('home.select')"
            suffix-icon="ArrowRightBold" />
        </div>
        <div class="filter_item" style="padding-left: 5px" @click="handleOpenSort">
          <el-input size="large" v-model="typeSortText" readonly :placeholder="$t('home.sort')"
            suffix-icon="ArrowRightBold" />
        </div>
      </div>
      <div class="filter_bottom">
        <div class="filter_item test">
          <el-input size="large" v-model="queryParams.name" clearable :placeholder="$t('home.search')"
            suffix-icon="Search" />
        </div>
      </div>
    </div>

    <div class="home_list commodity_list">
      <div class="commodity_card" v-for="(item, index) in list" @click="handleDetail(item)">
        <div class="commodity_cover">
          <img :src="item.imageUrl" alt="" srcset="" v-onerror />
        </div>
        <div class="commodity_name">{{ item.productName }}</div>
        <div class="commodity_price">HKD {{ item.amount }}</div>
        <div class="commodity_del_prce">HKD {{ item.originalAmount }}</div>
        <div class="commodity_footer">
          <div class="commodity_spuervip">VVIP{{ item.vvipAmount }}</div>
          <div class="commodity_vip"> <span>VIP</span>{{ item.vipAmount }}</div>
        </div>
        <div class="car" @click.prevent.stop="handleOpenPop(item)">
          <SvgIcon name="car" />
        </div>
      </div>
    </div>
    <div class="pagination" v-if="total > 50">
      <w-pagination :total="total" @handleChangePage="handleChangePage"></w-pagination>
    </div>
    <wFooter></wFooter>

    <TypePop ref="typePopDialog" @comfir="comfirType"></TypePop>
    <sortPop ref="SortPop" @handleSort="handleSort"></sortPop>

    <w-product-pop ref="productPop"></w-product-pop>
    <!-- SKU -->
    <w-taste-pop ref="skuPop"></w-taste-pop>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive, onUnmounted, watch, getCurrentInstance } from "vue";
import wHeader from "../../components/w-header.vue";
import wFooter from "../../components/w-footer.vue";
import TypePop from "./components/type-pop.vue";
import sortPop from "./components/sort-pop.vue";
import { useRouter } from "vue-router";
import { getBannerList, getPrudoctList } from '@/api/mall'
import storage from '@/utils/storage';
const typePopDialog = ref();
const handleOpenSelect = () => {
  typePopDialog.value.open();
};
const SortPop = ref()
const handleOpenSort = () => {
  SortPop.value.open()
}


const router = useRouter()
const handleDetail = (item) => {
  router.push({
    path: '/product',
    query: {
      id: item.id,
      productType: item.productType
    }
  })
}

onMounted(() => {
  init()
  initList()
})

const Banners = ref([
])
// 轮播
const carousel = ref()
var timer
async function init() {
  const res = await getBannerList()
  if (res) {
    Banners.value = res
    let num = 0
    timer = setInterval(() => {
      const index = num += 1
      if (index < Banners.value.length) {
        carousel._value.setActiveItem(index)
      } else {
        num = 0
        carousel._value.setActiveItem(0)
      }
    }, 3000)
  }
}
onUnmounted(() => {
  clearInterval(timer)
})


// 商品列表
const list = ref();
const total = ref(0)
const instance = getCurrentInstance()
const queryParams = reactive({
  name: '',
  pageNo: 1,
  pageSize: 50,
  priceSort: null,
  upTimeSort: null,
  sales: null,
  groupId: []
})
async function initList() {
  const res = await getPrudoctList(queryParams, instance)
  if (res) {
    list.value = res.records
    total.value = res.total
  }
}


const typeParams = ref({})
const comfirType = (arr) => {
  queryParams.groupId = []
  typeParams.value = {}
  let names = []
  if (arr.length) {
    arr.forEach(el => {
      queryParams.groupId.push(el.id)
      names.push(el.name)
      typeParams.value = {
        name: names.join(',')
      }

    })
  } else {
    queryParams.groupId = []
  }
  queryParams.pageNo = 1
  initList()
}

const typeSortText = ref('')
const handleSort = (type, v, t) => {
  queryParams.priceSort = null
  queryParams.upTimeSort = null
  queryParams.sales = null
  queryParams.pageNo = 1
  if (type) {
    queryParams[type] = v
  }
  typeSortText.value = t

  initList()
}

watch(() => queryParams.name, (v) => {
  initList()
})

const handleChangePage = (v) => {
  queryParams.pageNo = v
  initList()
}

// 点击小图标
const productPop = ref()
const skuPop = ref()
const handleOpenPop = (item) => {
  productPop.value.open(item)
}


onUnmounted(() => {
  storage.removeStorage('adds')
})
</script>

<style scoped lang="scss">
.home_page {
  margin-top: 56px;

  .home_banner {
    height: 126px;
    overflow: hidden;
    margin: 10px 0;

    .carousel {
      margin: 0 17px;
      height: 100%;
      border-radius: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 126px;
      }
    }
  }

  .home_search {
    margin: 0 17px;

    .filter_top {
      display: flex;
      flex-direction: row;
      margin-bottom: 8px;
    }
  }

  .commodity_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 17px;
    margin-top: 10px;
    min-height: 300px;
  }

  .commodity_card {
    padding-bottom: 10px;
    max-height: 297px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #0000001f;
    position: relative;

    .commodity_cover {
      width: 100%;
      height: 167px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .commodity_name {
      color: #333333;
      font-family: Helvetica;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      letter-spacing: 0em;
      text-align: left;
      padding: 5px;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      line-height: 1.5;
      height: 40px;
    }

    .commodity_price {
      font-family: Helvetica;
      font-size: 16px;
      font-weight: 700;
      line-height: 18px;
      letter-spacing: 0em;
      text-align: left;
      padding: 2px 5px;

    }

    .commodity_del_prce {
      font-family: Helvetica;
      font-size: 12px;
      font-weight: 400;
      line-height: 14px;
      letter-spacing: 0em;
      text-align: left;
      color: #999999;
      text-decoration: line-through;
      padding: 0 5px;

    }

    .commodity_footer {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 5px;
      font-size: 10px;

      .commodity_spuervip,
      .commodity_vip {
        border-top-left-radius: 2px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 2px;
        border-radius: 2px, 10px, 2px, 10px;
        color: #fff;
        background: #ffac04;
        font-size: 9px;
        height: 10px;
        line-height: 11px;
        padding: 3px 5px;
        margin-right: 2px;
      }

      .commodity_spuervip {
        background: #ffac04;
        margin-right: 4px;
      }

      .commodity_vip {
        background: #22da50;
        position: relative;
        top: 1px;

        span {
          color: #FFE600;
        }
      }
    }

    .car {
      position: absolute;
      right: 8px;
      bottom: 14px;
      width: 25px;
      height: 25px;
      color: #fff;
      background-color: var(--el-color-primary);
      border-radius: 5px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }

  .pagination {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
